<template>
    <div class="roleBox">
        <el-bread />
        <!-- 添加按钮 -->
        <el-button class="addBtn" type="success" @click="add">添加</el-button>
        <!-- 列表 -->
        <v-list @edit="edit"></v-list>
        <!-- 弹框 -->
        <v-dialog :isShow="isShow" @offCheck="offCheck" :isAdd="isAdd" ref="dialog"></v-dialog>
    </div>
</template>

<script setup lang="ts">
// 引入子组件
import vList from "./list.vue"
import vDialog from "./dialog.vue"
import { ref } from "vue"
let isAdd = ref(true)
let isShow = ref(false)
const dialog = ref()
// 点击添加
let add = () => {
    isShow.value = true
    isAdd.value = true
}
// 点击取消
let offCheck = (e: boolean) => {
    isShow.value = e
}
// 点击编辑
let edit = (e: string) => {
    isShow.value = true
    isAdd.value = false
    dialog.value.lookUp(e)
}
</script>

<style scoped lang="less">
.roleBox {
    .addBtn {
        margin-top: 30px;
        margin-bottom: 5px;
    }
}
</style>
